<template>
	<div class="choose-coupon">
		<div class="coupon-item" @click='showCouponList'>
			<div class="left"><div>优惠券</div><div><span class="red">{{showNum}}</span>张可用</div></div>
			<div class="right"><div class="coupon-txt"><span class="txt01">未使用</span><span class="txt02"></span></div><div class="iconfont icon-arrows"></div></div>
		</div>
		<ul class="list" v-show='couponShowFlag'>
			<li class="no-use" @click='chooseCouponNo' >
				<div class="content">不使用优惠券</div>
				<div class="btn">
					<input type="radio" :id='00' name="radio-1-set" class="regular-radio" checked="">
					<label :for='00'><div class="btn iconfont icon-checked"></div></label>
				</div>
			</li>
			<li v-for='item in couponList' @click='chooseCoupon' :couponname='item.name' :couponprice='item.price' v-show='item.couponShowFlag'>
				<div class="left">

					<div class="price">{{item.price}}<span>元</span></div>
					<div class="txt">
						<div>{{item.name}}</div>
						<div>有效期：{{item.date}}</div>
					</div>
					<div class="circle-top"></div>
					<div class="circle-down"></div>
				</div>
				<div class="right">
					<input type="radio" :id='item.id' name="radio-1-set" class="regular-radio">
					<label :for='item.id'><div class="btn iconfont icon-checked"></div></label>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	import goback from '../common/goback';
	export default {
		data() {
				return {
					couponList: [
					{
						name: '20元洗车抵用券',
						date: '2017.2.12—2018.5.17',
						price: '20',
						id: '01',
						couponShowFlag:false

					}, 
					{
						name: '10元洗车抵用券',
						date: '2015.2.17—2016.11.17',
						price: '10',
						id: '02',
						couponShowFlag:false

					}, 
					{
						name: '30元洗车抵用券',
						date: '2015.2.12—2016.11.17',
						price: '30',
						id: '03',
						couponShowFlag:false

					}
					],
					couponShowFlag:false,
					chooseTime:'2016-10-26',
					showNum:0

				}
			},
			components: {
				goback
			},
			methods: {
				chooseCoupon: function(e) {
					var target=e.currentTarget;
					var txt01=target.getAttribute('couponname');
					var txt02=target.getAttribute('couponprice');
					var couponTxt01=document.querySelector(".txt01");
					var couponTxt02=document.querySelector(".txt02");
					couponTxt01.innerHTML=txt01+'，';
					couponTxt02.innerHTML='- ¥ '+txt02;
					this.couponShowFlag=false;
				},
				chooseCouponNo:function () {
					var couponTxt01=document.querySelector(".txt01");
					var couponTxt02=document.querySelector(".txt02");
					couponTxt01.innerHTML='未使用';
					couponTxt02.innerHTML='';
					this.couponShowFlag=false;
				},
				showCouponList:function () {
					this.couponShowFlag=true;
				}
			},
			
			ready:function () {
				var chooseTime=new Date(this.chooseTime).getTime();
				var num=0;
				for(var i=0;i<this.couponList.length;i++){
					var validDate=this.couponList[i].date;
					var validDateArray=validDate.split('—');
					var validDateStart=new Date(validDateArray[0]).getTime();
					var validDateEnd=new Date(validDateArray[1]).getTime();
					if(chooseTime<=validDateEnd&&chooseTime>=validDateStart){
						this.couponList[i].couponShowFlag=true;
					}
					if(this.couponList[i].couponShowFlag==true){
						num++
					}
					
				}
				console.log(num);
				this.showNum=num;
//				var num=0;
//				for(var j=0;j<this.couponList.length;i++){
//					if(this.couponList[j].couponShowFlag==true){
//						num++
//					}
//				}
//				this.showNum=num;
//				console.log(this.couponList);
//				
				
			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	
	.choose-coupon {
		.coupon-item{
			width: rem(375);
			height: rem(44);
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			font-size:rem(14);
			color:#333;
			padding:0 rem(16) 0 rem(14);
			.left{
				display: flex;
				align-items: center;
				div:nth-of-type(1){
					padding-right: rem(5);
				}
			}
			.right{
				display: flex;
				align-items: center;
				color: #999;
				font-size: rem(13);
				.iconfont{
					color: #999;
				}
				.coupon-txt{
					.txt02{
					}
				}
			}
		}
		.list {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: #eee;
			.no-use {
				width: rem(345);
				height: rem(40);
				margin-left: rem(15);
				margin-top: rem(15);
				margin-bottom: rem(15);
				background: #fff;
				background: #ffffff;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.content {
					font-size: rem(15);
					color: $_999;
					padding-left: rem(13);
				}
				.btn {
					label {
						position: absolute;
						width: 100%;
						height: 100%;
						right: 0;
						top: 0;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
			li {
				width: rem(345);
				height: rem(78);
				margin-left: rem(15);
				background: #fff;
				border-left: rem(5) solid #0299f6;
				background: #ffffff;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: rem(15);
				position: relative;
				.left {
					display: flex;
					align-items: center;
					overflow: hidden;
					position: relative;
					.price {
						width: rem(84);
						height: rem(78);
						line-height: rem(78);
						border-right: 1px dashed #ccc;
						color: #0299f6;
						font-size: rem(36);
						margin-right: rem(13);
						margin-left: rem(13);
						span {
							font-size: rem(15);
						}
					}
					.txt {
						div:nth-of-type(1) {
							font-size: rem(15);
							line-height: rem(15);
							color: #030303;
						}
						div:nth-of-type(2) {
							font-size: rem(13);
							line-height: rem(13);
							color: #999999;
							margin-top: rem(8);
						}
					}
					.circle-top {
						width: rem(10);
						height: rem(10);
						border-radius: 100%;
						position: absolute;
						background: #eee;
						left: rem(91.5);
						top: rem(-5);
					}
					.circle-down {
						width: rem(10);
						height: rem(10);
						border-radius: 100%;
						position: absolute;
						background: #eee;
						left: rem(91.5);
						bottom: rem(-5);
					}
				}
				.right {
					label {
						position: absolute;
						width: 100%;
						height: 100%;
						right: 0;
						top: 0;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
		}
	}
	
	.regular-radio {
		display: none;
	}
	
	.regular-radio+ label>div {
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
		border: 1px solid $_999;
		margin-right: rem(14);
		color: #fff;
	}
	
	.regular-radio:checked+ label>div {
		border: 1px solid $blue;
		background: $blue;
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
	}
</style>